<template>
  <div class="graphitizing">
    <!-- 表格 -->
    <div class="card-table">
      <el-button
        icon="el-icon-plus"
        type="primary"
        @click="shoveChargeAdd = true"
        >新增石墨化报告单</el-button
      >
    </div>
    <div class="card-table" style="margin-top: 12px">
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          v-for="item in tableList"
          :key="item.id"
          :label="item.name"
          :prop="item.prop"
          :width="item.width"
          :fixed="item.fixed"
          align="center"
        />
        <el-table-column label="操作" align="center" width="280" fixed="right">
          <template slot-scope="{ row }">
            <div class="tablebBtn">
              <el-button type="text" size="small" @click="mouseclick(row)"
                >修改</el-button
              >
              <el-button type="text" size="small" @click="deleteOnes(row)"
                >删除</el-button
              >
              <el-button
                type="text"
                class="btnText"
                size="small"
                @click="goReportDetail(row)"
              >
                <el-link :underline="false">导出报表</el-link></el-button
              >

              <el-button
                @click="goOriginalData(row)"
                type="text"
                class="btnText"
                size="small"
              >
                <el-link :underline="false">原始记录</el-link></el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div
        v-if="tableData.length !== 0"
        style="display: flex; flex-direction: row-reverse; margin-top: 10px"
      >
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalCount"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-drawer
      :with-header="false"
      direction="rtl"
      :visible.sync="drawer"
      :before-close="handleClose"
      destroyOnClose
      append-to-body
      size="980px"
    >
      <!-- 这是通过props -->
      <!-- <ReportDetail @sonclose="handleEvents" :reportItem="reportItem" /> -->
      <!-- 跳转新页面-->
      <ReportDetail />
    </el-drawer>
    <shoveCharges
      :shoveCharges="shoveChargeAdd"
      @UpshoveCharges="commontEvent"
      @UpshoveCharge="shoveChargeReviseEvent"
    ></shoveCharges>
    <shovechargeResive
      :shoveCharges="shoveChargeRevise"
      @UpshoveCharge="commontEvent"
      @UpshoveCharges="shoveChargeReviseEvents"
      :graReports="shovegraReport"
    ></shovechargeResive>
  </div>
</template>

<script>
import ReportDetail from "./reportDetail.vue";
import shoveCharges from "./button/shovecharge.vue";
import shovechargeResive from "./button/shovechargeResive.vue";
import {
  getHisReportTest,
  ReportgetExcel,
  graReportDelete,
} from "@/api/process";
export default {
  name: "hisReport",
  components: { ReportDetail, shoveCharges, shovechargeResive },
  data() {
    return {
      yuanmeng: true,
      drawer: false,
      pageSize: 10, // 分页的页面大小
      totalCount: 0, // 分页的数据总数
      currentPage: 1, // 分页的当前页
      shovegraReport: {},
      powergraReport: {},
      qualityGraReport: {},
      //开始
      shoveChargeAdd: false,
      shoveChargeRevise: false,
      qualitys: false,

      // 结束
      tableData: [],
      tableList: [
        {
          id: 1,
          name: "编号",
          prop: "headTitle",
          fixed: "left",
          width: 150,
        },
        {
          id: 5,
          name: "炉号",
          prop: "stoveNumber",
          width: 100,
        },
        {
          id: 19,
          name: "总第炉数",
          prop: "stoveCode",
          width: 100,
        },
        {
          id: 90,
          name: "客户",
          prop: "customer",
          width: 100,
        },
        {
          id: 86,
          name: "规格型号",
          prop: "specification",
          width: 100,
        },
        {
          id: 10,
          name: "送电时间",
          prop: "startTime",
          width: 160,
        },
        {
          id: 15,
          name: "停电时间",
          prop: "endTime",
          width: 160,
        },
        {
          id: 16,
          name: "时长",
          prop: "runTime",
          width: 140,
        },

        {
          id: 21,
          name: "总重",
          prop: "heavy",
        },
        {
          id: 201,
          name: "附属品",
          prop: "accessory",
        },
        {
          id: 23,
          name: "总价",
          prop: "totalElectPrice",
          width: 120,
        },
        {
          id: 25,
          name: "电量合计",
          prop: "totalPower",
          width: 150,
        },
        {
          id: 30,
          name: "有功电量",
          prop: "activeElectricity",
          width: 150,
        },
        {
          id: 32,
          name: "基础电价",
          prop: "basicElectPrice",
          width: 110,
        },
        {
          id: 35,
          name: "电量单价",
          prop: "electPrice",
          width: 110,
        },
        {
          id: 34,
          name: "吨耗电价",
          prop: "tonPrice",
          width: 110,
        },
        {
          id: 33,
          name: "吨耗电量",
          prop: "tonElect",
          width: 110,
        },
        {
          id: 36,
          name: "低谷(占比)",
          prop: "lowPercent",
          width: 110,
        },
        {
          id: 37,
          name: "平段(占比)",
          prop: "flatPercent",
          width: 110,
        },
        {
          id: 38,
          name: "高峰(占比)",
          prop: "heightPercent",
          width: 110,
        },
        {
          id: 39,
          name: "尖峰(占比)",
          prop: "topPercent",
          width: 110,
        },
      ],
      reportItem: {},
    };
  },
  mounted() {
    this.getTableData();
  },
  watch: {},
  methods: {
    //开始
    shoveChargeReviseEvent() {
      this.shoveChargeAdd = false;
    },
    shoveChargeReviseEvents() {
      this.shoveChargeRevise = false;
      this.shovegraReport = 2;
    },
    async commontEvent(data, name) {
      await this.getTableData();
      if (name === "修改工单") {
        this.shoveChargeRevise = false;
        this.message(data, name);
      } else if (name === "新增工单") {
        this.shoveChargeAdd = false;
        this.message(data, name);
      }
    },
    mouseclick(row) {
      this.shoveChargeRevise = true;
      this.shovegraReport = row.graReport;
    },
    deleteOnes(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let id = row.graReport._id;
          let params = {
            id,
          };
          graReportDelete(params).then(async (res) => {
            await this.getTableData();
            this.message(res.data);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    message(data) {
      if (data.code == 200) {
        this.$message({
          message: `${data.message}`,
          type: "success",
        });
      } else {
        this.$message({
          message: `${data.message}`,
          type: "warning",
        });
      }
    },

    //结束
    handleEvents() {
      this.drawer = false;
    },
    goOriginalData(row) {
      const payload = {
        id: row.graReport._id,
      };
      ReportgetExcel(payload).then((res) => {
        if (res.data.code === 200) {
          console.log(res.data.data);
          window.location.href = "http://" + res.data.data;
          console.log(window.location.href);
        }
      });
    },
    goReportDetail(row) {
      row.id = row.graReport._id;
      const routeUrl = this.$router.resolve({
        path: "/reportDetailTest",
        query: row,
      });
      window.open(routeUrl.href, "_blank");
    },
    handleClose() {
      this.drawer = false;
    },

    async getTableData() {
      const paylaod = {
        currPage: this.currentPage,
        pageSize: this.pageSize,
      };
      const res = await getHisReportTest(paylaod);
      if (res.data.code === 200) {
        this.tableData = res.data.data.data;
        this.totalCount = res.data.data.totalCount;
        this.tableData.forEach((element) => {
          element.headTitle = element.graReport.powerList.headTitle;
          element.startTime = element.graReport.powerList.startTime;
          element.endTime = element.graReport.powerList.endTime;
          element.basicElectPrice = element.graReport.powerList.basicElectPrice;
          element.customer = element.customer;
          element.specification = element.specification;
        });
      }
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.getTableData();
    },
    handleCurrentChange(value) {
      this.currentPage = value;
      this.getTableData();
    },
  },
};
</script>

